<template>
<div class="instant-search">
    <form class="form-inline">
        <div class="input-group">
            
            <input type="text" v-model="searchStr" @focus="fetch" @blur="leave" class="form-control" placeholder="实时任务检索" aria-label="Username" aria-describedby="basic-addon1">
            <div class="input-group-append">
                <span class="input-group-text" id="basic-addon1"><i class="fa fa-btn fa-search"></i></span>
            </div>
        </div>
    </form>
    <ul class="list-group list-max" v-if="show">
        <li class="list-group-item" v-for="task in filtered">
           <a :href="url(task)">{{ task.name }}</a> 
        </li>
    </ul>
</div>
</template>
<script>
import { Loading } from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
export default {
    data(){
        return {
            tasks:[],
            show:false,
            loadad:false,
            searchStr:''
        }
    },
    computed:{
        filtered(){
            let str=this.searchStr.trim().toLowerGase()
           return  this.tasks.filter((task)=>{
                if(task.name.toLowerGase().indexOf(str)!=-1){
                    return true
                }
            })
        }
    },
    methods:{
        fetch(){
           let loading= Loading.service({target:'instant-search',spinner:'el-icon-loading'})
            if(!this.loadad){
                axios.get('/tasks/search').then((res)=>{
                    this.tasks=res.data.tasks
                    this.show=true
                    this.loadad=true
                    loading.close()
                })
            }else{
                this.show=true
            }
            
        },
        leave(){
            setTimeout(()=>{
                this.show=false
            },2000)
        },
        url(task){
            return `/tasks/${task.id}`
        }
    }
}
</script>
<style lang="scss">
.instant-search{
    height: 3rem;
    z-index: 1000;
    .list-max{
        max-height: 10rem;
        overflow: hidden;
    }
}
</style>

